<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单步执行</title>

    <link rel="icon" href="img/logo.png" type="image/x-icon" />

    <script src="js/jquery.min.js"></script>

    <!-- eel(python) -->
    <script type="text/javascript" src="./eel.js"></script>

    <!-- Import Vue 3 -->
    <script src="js/m_vue3.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

    <!-- vue 路由 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.js"></script> -->

    <!-- axios -->
    <script src="js/m_axios.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

    <!-- Import component library -->
    <script src="js/m_element-plus.js"></script>
    <!-- <script src="https://unpkg.com/element-plus"></script> -->

    <!-- echarts -->
    <!-- <script src="js/echarts.js"></script> -->
    <script src="js/echart.min.js"></script>

    <!-- icon -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
            integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
            crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Import style -->
    <link rel="stylesheet" href="css/m_element-plus.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" /> -->

    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/m_vxe-table.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css"> -->
    <!-- 引入脚本 -->
    <script src="js/m_xe-utils.js"></script>
    <!-- <script src="https://unpkg.com/xe-utils"></script> -->
    <script src="js/m_vx-table.js"></script>
    <!-- <script src="https://unpkg.com/vxe-table@next"></script> -->

    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/step.css">

</head>

<body>

    <div id="app">
        <!-- 整个屏幕container -->
        <el-container class="index_container">
            <!-- mian-aside 左边 -->
            <el-aside width="200px" class="index_aside">
                <!-- aside 的顶部（icon 和 title） -->
                <div class="index_aside_top">
                    <img src="img/logo.png" alt="logo">
                    <span>TiTiuper</span>
                </div>

                <div class="index_aside_menu">
                    <!-- index 首页 -->
                    <div class="index_aside_menu_item" @click="jumpToHomeHtml">
                        <img src="/img/menu/index_gray.png" alt="首页">
                        <span>首页</span>
                    </div>
                    <!-- 股票管理 -->
                    <div class="index_aside_menu_item" @click="jumpToStockHtml">
                        <img src="/img/menu/list_gray.png" alt="股票管理">
                        <span>股票管理</span>
                    </div>
                    <!-- 策略管理 -->
                    <div class="index_aside_menu_item" @click="jumpToStrategyHtml">
                        <img src="/img/menu/task_gray.png" alt="策略管理">
                        <span>策略管理</span>
                    </div>
                    <!-- 单步执行 -->
                    <div class="index_aside_menu_item index_aside_menu_item_selected" @click="jumpToSetpHtml">
                        <img src="/img/menu/run.png" alt="单步执行">
                        <span>单步执行</span>
                    </div>
                    <!-- 多股票执行 -->
                    <div class="index_aside_menu_item" @click="jumpToDebugHtml">
                        <img src="/img/menu/column_gray.png" alt="多股票执行">
                        <span>多股票执行</span>
                    </div>
                    <!-- 数据调整 -->
                    <div class="index_aside_menu_item" @click="jumpToStrategyHtml">
                        <img src="/img/menu/data_gray.png" alt="数据调整">
                        <span>数据调整</span>
                    </div>
                    <!-- 运营管理 -->
                    <div class="index_aside_menu_item" @click="jumpTooperationHtml">
                        <img src="/img/menu/list_gray.png" alt="运营管理">
                        <span>运营管理</span>
                    </div>
                    <!-- 设置 -->
                    <!-- <div class="index_aside_menu_item">
                        <img src="/img/menu/setting_gray.png" alt="设置">
                        <span>Setting</span>
                    </div> -->
                </div>

            </el-aside>

            <el-main>


                <el-header>
                    <el-container>
                        <i class="fa fa-linkedin-square margin10" style="margin: 0 10px;"></i>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                            <el-breadcrumb-item><a href="">promotion management</a></el-breadcrumb-item>
                            <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                            <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-container>
                    <el-divider />
                </el-header>

                <el-card class="main_card">

                    <el-scrollbar max-height="100%">

                        <el-main class="index_main">

                            <!-- echart + 数据分析 -->
                            <el-row :gutter="24">
                                <!-- echart -->
                                <el-col :span="16">
                                    <el-card>
                                        <div class="echard_title_box">
                                            <div class="card_title_box">
                                                <span class="card_title_box_chinese">K线图</span>
                                                <span>&nbsp;- candlestick chart</span>
                                            </div>

                                            <div>

                                            </div>

                                            <div class="echart_button_group_box" v-show="isClickOK">
                                                <!-- 后退一步 -->
                                                <el-button type="primary" plain @click="buttonEchartBeforetHandler">
                                                    <i class="fa fa-step-backward" style="margin: 0 5px;"></i>
                                                    back
                                                </el-button>
                                                <!-- 前进一步 -->
                                                <el-button type="success" plain @click="buttonEchartNextHandler">
                                                    <i class="fa fa-step-forward" style="margin: 0 5px;"></i> fore
                                                </el-button>
                                                <!--  -->
                                                <el-button type="danger" plain @click="buttonEchartAllHandler">
                                                    <i class="fa fa-fast-forward" style="margin: 0 5px;"></i> dir-all
                                                </el-button>
                                            </div>
                                        </div>

                                        <el-divider></el-divider>

                                        <div ref="shareChart" class="shareChart"></div>
                                    </el-card>

                                </el-col>
                                <!-- 数据分析 -->
                                <el-col :span="8">
                                    <el-card>

                                        <el-row>
                                            <div class="card_title_box">
                                                <span class="card_title_box_chinese">数据分析</span>
                                                <span>&nbsp;- data analysis</span>
                                            </div>
                                        </el-row>

                                        <el-divider></el-divider>

                                        <div class="box_analysis">

                                            <div class="analysis_asset">
                                                <el-progress class="progress" type="circle"
                                                    :percentage="this.getProgressProfitRate_ABS()"
                                                    :color="this.getProgressColor()">
                                                    <div>
                                                        <div class="percentage_value">{{this.getProgressProfitRate()}}
                                                        </div>
                                                        <div class="percentage_label">Progressing</div>
                                                    </div>
                                                </el-progress>
                                                <div class="asset_list">
                                                    <span>now:{{this.now}}</span>
                                                    <span>持股:{{this.stockNum[this.now-1]}}</span>
                                                    <span>股市值：{{this.assetShare[this.now-1]}}</span>
                                                    <span>流动资产：{{this.assetOwn[this.now-1]}}</span>
                                                    <span>总资产：{{this.assetAll[this.now-1]}}</span>
                                                    <span>增幅：{{(this.increase[this.now-1])*100}}%</span>
                                                    <span>操作：{{this.getBuyInfoOperation()}}</span>
                                                    <span>策略名字：{{this.getBuyInfoLogicName()}}</span>
                                                </div>
                                            </div>

                                        </div>

                                    </el-card>
                                </el-col>
                            </el-row>

                            <!-- 股票和策略选择 -->
                            <el-row :gutter="24" style="margin-top: 10px;">
                                <el-col :span="24">
                                    <el-card>

                                        <el-row>
                                            <div class="card_title_box">
                                                <span class="card_title_box_chinese">股票&策略选择</span>
                                                <span>&nbsp;- selector</span>
                                            </div>
                                        </el-row>

                                        <el-divider></el-divider>

                                        <!-- 选择股票和策略 -->
                                        <div class="box_select_strategy">
                                            <div class="box_select">
                                                <span>股票选择</span>
                                                <el-select v-model="targetStockCode" placeholder="选择目标股票"
                                                    @change="selectedStockHandler">
                                                    <el-option v-for="(item,index) in stockEnum" :key="index"
                                                        :label="this.getStockCodeStr(item)" :value="item" />
                                                </el-select>
                                            </div>
                                            <div class="box_select">
                                                <span>策略选择</span>
                                                <el-select v-model="targetStrategyName" placeholder="选择目标策略"
                                                    @change="selectedStrategyHandler">
                                                    <el-option v-for="item in strategyEnum" :key="item" :label="item"
                                                        :value="item" />
                                                </el-select>
                                            </div>
                                            <el-button type="success" plain v-show="this.isSelectedStockAndStrategy"
                                                @click="buttonDetermineStockAndStrategyHandler">确定
                                            </el-button>
                                        </div>

                                        <div v-show="this.targetStrategyName">

                                            <el-divider>
                                                <i class="fa fa-bitcoin"></i> 买入
                                            </el-divider>

                                            <div class="logic_box" v-for="(item, index) in this.targetStrategy.buyLogic"
                                                :key="index">
                                                <!-- 名字 -->
                                                <el-tooltip :content="item.comment" placement="top">
                                                    <span style="width: 10%; text-align: center;">{{item.name}}</span>
                                                </el-tooltip>
                                                <!-- 内容 -->

                                                <!-- <el-tooltip class="box-item" effect="dark" placement="top-start">
                                                    <template #content><span style="visibility: hidden;">{{getTargetLogicContent(item.value)}}</span>{{logicTooltipContent}}</template>
                                                    <el-input style="width: 80%;" type="textarea" autosize v-model="item.value" placeholder="自定义算式">
                                                    </el-input>
                                                </el-tooltip> -->

                                                <el-tooltip class="box-item" effect="dark" content="暂无" placement="top">
                                                    <el-input style="width: 80%;" type="textarea" autosize v-model="item.value" placeholder="自定义算式">
                                                    </el-input>
                                                </el-tooltip>



                                                <el-button style="margin-left: 10px;" type="success" plain
                                                    @click="buttonChangeLogicContent(true,item)">
                                                    <i class="fa fa-plus-square"></i>
                                                </el-button>
                                                <el-button style="margin-left:10px;" type="danger" plain>
                                                    <i class="fa fa-minus-square"></i>
                                                </el-button>
                                            </div>

                                            <el-divider>
                                                <i class="fa fa-money"></i> 卖出
                                            </el-divider>

                                            <div class="logic_box"
                                                v-for="(item, index) in this.targetStrategy.sellLogic" :key="index">
                                                <!-- 名字 -->
                                                <el-tooltip :content="item.comment" placement="top">
                                                    <span style="width: 10%; text-align: center;">{{item.name}}</span>
                                                </el-tooltip>
                                                <!-- 内容 -->
                                                <el-input style="width: 80%;" type="textarea" autosize
                                                    v-model="item.value" placeholder="自定义算式">
                                                </el-input>
                                                <el-button style="margin-left: 10px;" type="success" plain>
                                                    <i class="fa fa-plus-square"></i>
                                                </el-button>
                                                <el-button style="margin-left:10px;" type="danger" plain>
                                                    <i class="fa fa-minus-square"></i>
                                                </el-button>
                                            </div>

                                        </div>

                                    </el-card>
                                </el-col>
                            </el-row>

                        </el-main>

                    </el-scrollbar>



                </el-card>
            </el-main>

        </el-container>
    </div>


    <script>

        // 打开警告弹窗
        const warn_noStrategy = () => {
            ElNotification({
                title: 'Warning',
                message: 'This is a warning message',
                type: 'warning',
            })
        };

        const App = {
            el: '#app',
            data() {
                return {

                    // 指向下一个
                    "now": 0,
                    // 是否选择了股票和策略
                    "isSelectedStockAndStrategy": false,
                    "isClickOK": false,
                    // 是否获取了judge数据
                    "isGetedJudgeData": false,


                    /**
                     * 初始化内容
                     * 打开网页即获取
                     */
                    "parameterEnum": [],
                    "stockEnum": [],
                    "allStock": {},
                    "strategyEnum": [],
                    "allStrategy": {},


                    /**
                     * 股票相关数据
                     * 选择股票后更新
                    */
                    "targetStockCode": null,
                    "targetStockName": "",
                    "targetStockBeg": "",
                    "targetStockEnd": "",
                    "targetStockData": [],
                    "targetStockTime": [],
                    "targetStockMA5": [],
                    "targetStockMA10": [],
                    "targetStockMA20": [],
                    "targetStockMA30": [],


                    /**
                     * 策略相关数据
                    */
                    "targetStrategyName": "",
                    "targetStrategy": {},



                    /**
                    * chart 部分数据（to now）
                    * 点击下一步或者点击全部后更新
                    */
                    "targetChartToNowData": [],
                    "targetChartToNowTime": [],
                    "targetChartToNowMA5Data": [],
                    "targetChartToNowMA10Data": [],
                    "targetChartToNowMA20Data": [],
                    "targetChartToNowMA30Data": [],
                    // "targetMarkPointToNowData": [],
                    // // "targetMarkPointToNowData": [{ 'name': 'yy', 'coord': ['2020-09-23', 83.03] }, { 'name': 'sellLogic2', 'coord': ['2020-09-28', 74.34] }, { 'name': 'yy', 'coord': ['2021-03-26', 46.89] }, { 'name': 'sellLogic2', 'coord': ['2021-04-22', 49.38] }, { 'name': 'yy', 'coord': ['2021-08-02', 51.54] }, { 'name': 'sellLogic2', 'coord': ['2021-08-10', 48.75] }, { 'name': 'yy', 'coord': ['2021-08-16', 49.29] }, { 'name': 'sellLogic2', 'coord': ['2021-08-30', 46.55] }, { 'name': 'yy', 'coord': ['2022-02-08', 40.89] }, { 'name': 'sellLogic2', 'coord': ['2022-03-08', 38.99] }, { 'name': 'yy', 'coord': ['2022-03-31', 39.35] }, { 'name': 'sellLogic2', 'coord': ['2022-04-08', 37.29] }, { 'name': 'yy', 'coord': ['2022-04-20', 36.53] }, { 'name': 'sellLogic2', 'coord': ['2022-04-22', 33.51] }, { 'name': 'yy', 'coord': ['2022-08-29', 32.33] }, { 'name': 'sellLogic2', 'coord': ['2022-09-16', 30.73] }, { 'name': 'yy', 'coord': ['2022-12-12', 36.39] }, { 'name': 'sellLogic2', 'coord': ['2022-12-19', 34.0] }, { 'name': 'yy', 'coord': ['2023-01-09', 35.07] }],



                    /**
                     * judge 相关数据
                     * 增幅（0.005） asset_own(自身资产) asset_share（股市资产） stock_num（股票数量） mark_point（标记数据）
                    */
                    "increase": [],
                    "assetOwn": [100000],
                    "assetShare": [0],
                    "assetAll": [1000000],
                    "stockNum": [0],
                    "markPoint": [],
                    // 购买或者卖出的操作和策略名字
                    "buyInfo": [],


                    "logicTooltipContent":"",

                }
            },

            methods: {
                //测试跳转test.html
                jumpToHomeHtml() {
                    window.location.href = "/home.html";
                },
                jumpToStockHtml() {
                    window.location.href = "/stock.html";
                },
                jumpToSetpHtml() {
                    window.location.href = "/step.html";
                },
                jumpToDebugHtml() {
                    window.location.href = "/debug.html";
                },
                jumpToStrategyHtml() {
                    window.location.href = "/strategy.html";
                },
                jumpTooperationHtml() {
                    window.location.href = "/operation.html";
                },



                async getTargetLogicContent(str){
                    // let str = '{increase(2)} <0 and abs({increase(1)}) <0.005 and {increase(0)} >0 and {close} > (({open(2)} + {close(2)})/2)    and    {close(1)}<{close(2)}  and {close(1)} < {open} and  {open(1)}<{close(2)}  and {open(1)} < {open}'
                    console.log("str>>>"+str);
                    returnStr = await eel.getLogicChineseContent(str)();
                    console.log(returnStr);
                    this.logicTooltipContent = returnStr;
                    return String(returnStr);
                },

                // tools
                getStockJsonStr(stockJson) {
                    let name = stockJson["name"];
                    let code = stockJson["code"];
                    return code + "-" + name;
                },

                getStockCodeStr(code) {
                    stockName = this.allStock[code]["name"];
                    return code + '-' + stockName;
                },

                getLogicJsonStr(logicJson, isBuy) {
                    logicStr = "";
                    // logicStr = logicJson.name;
                    logicStr += ": 如果 ";
                    logicStr += logicJson.operation_parameter.replace("a", logicJson.parameter);
                    logicStr += logicJson.logicSymbol;
                    logicStr += logicJson.operation_competitor.replace("a", logicJson.competitor);
                    if (isBuy) {
                        logicStr += " 买";
                    } else {
                        logicStr += " 卖";
                    }
                    return logicStr;
                },



                getBuyInfoOperation(index) {
                    console.log("buyInfor-Operation");
                    if (index > 0) {
                        console.log(this.buyInfo[index]);
                        operation = this.buyInfo[index].operation;
                        if (operation != "") {
                            return "O-" + operation;
                        } else {
                            return "无";
                        }

                    }
                    else {
                        return "";
                    }

                },



                getBuyInfoLogicName(index) {
                    if (index > 0) {
                        // console.log(this.buyInfo[this.now - 1]);
                        return this.buyInfo[index].LogicName;
                    }
                },



                getProgressProfitRate() {
                    assetAll = this.assetAll[this.now - 1];
                    rate = (assetAll - 100000) / 100000 * 100;
                    return rate.toFixed(2);
                    // return 80;
                },


                getProgressProfitRate_ABS() {
                    assetAll = this.assetAll[this.now - 1];
                    rate = (assetAll - 100000) / 100000 * 100;
                    if (rate < 0) {
                        rate = -rate;
                    }
                    return rate.toFixed(2);
                    // return 80;
                },


                getProgressColor() {
                    assetAll = this.assetAll[this.now - 1];
                    rate = (assetAll - 100000) / 100000 * 100;
                    if (rate >= 0) {
                        return '#BE0F2E';
                    }
                    return "#0FBE2E";
                },



                // 警告弹窗
                showNotification(message, type) {
                    this.$notify({
                        title: '提示',  //标题
                        // message: message,  //内容
                        message: h('i', { style: 'color: teal' }, message),
                        duration: 3000,  //设置弹框消失事件
                        position: 'top-right',  // 设置弹框在屏幕的哪个角弹出（只能设置4个角）
                        type: type,  //给标题前加一个小图标
                        offset: 100,  //偏移量：距离四个角的偏移程度（默认偏移了16px）
                        dangerouslyUseHTMLString: true,  //是否支持弹出框内传入 HTML 片段
                        // message: '<strong>这是 <i>HTML</i> 片段</strong>',   //开启后，这里可以写html
                        showClose: true,  //隐藏关闭按钮（右上角的x  默认为true，显示）
                        close() {
                            console.log('弹框被关闭了')
                        }   //点击关闭按钮的回调函数
                    });
                },


                // 展示该天的详细信息
                showDetailInfo(index) {
                    msg = "";
                    msg += "now: " + index + "<br>";
                    msg += "持股: " + this.stockNum[index] + "<br>";
                    msg += "股市值: " + this.assetShare[index] + "<br>";
                    msg += "流动资产: " + this.assetOwn[index] + "<br>";
                    msg += "总资产: " + this.assetAll[index] + "<br>";
                    msg += "增幅: " + (this.increase[index]) * 100 + "% <br>";
                    msg += "操作: " + this.getBuyInfoOperation(index) + "<br>";
                    msg += "逻辑名: " + this.getBuyInfoLogicName(index) + "<br>";
                    this.$msgbox({
                        title: '详细信息',
                        message: msg,
                        type: 'info',
                        draggable: true,
                        dangerouslyUseHTMLString: true
                    })
                },



                funcClickChartItem(param) {
                    console.log(param.dataIndex);
                    this.showDetailInfo(param.dataIndex);
                },

                // 图标属性设置
                setOption() {
                    let option = {
                        title: {
                            show: true,
                            text: this.targetStockCode + "-" + this.targetStockName,
                        },
                        xAxis: {
                            data: this.targetChartToNowTime,
                        },
                        yAxis: {
                            min: "dataMin",
                        },
                        legend: {
                            data: ["日K", "MA5", "MA10", "MA20", "MA30"],
                        },

                        tooltip: {
                            show: true,
                            trigger: "axis",
                            axisPointer: {
                                type: "cross",
                            },
                            backgroundColor: "rgba(255, 255, 255, 0.6)",
                            position: function (pos, params, el, elRect, size) {
                                var obj = {
                                    top: 10,
                                };
                                obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                                return obj;
                            },
                        },
                        dataZoom: [
                            {
                                type: "inside",
                            },
                        ],
                        series: [
                            {
                                name: "日K",
                                type: "candlestick",
                                data: this.targetChartToNowData,
                                markPoint: {
                                    label: "test",
                                    data: this.markPoint,
                                    silent: true
                                },
                            },
                            {
                                name: "MA5",
                                type: "line",
                                data: this.targetChartToNowMA5Data,
                                smooth: true,
                                lineStyle: {
                                    opacity: 0.5,
                                },
                            },
                            {
                                name: "MA10",
                                type: "line",
                                data: this.targetChartToNowMA10Data,
                                smooth: true,
                                lineStyle: {
                                    opacity: 0.5,
                                },
                            },
                            {
                                name: "MA20",
                                type: "line",
                                data: this.targetChartToNowMA20Data,
                                smooth: true,
                                lineStyle: {
                                    opacity: 0.5,
                                },
                            },
                            {
                                name: "MA30",
                                type: "line",
                                data: this.targetChartToNowMA30Data,
                                smooth: true,
                                lineStyle: {
                                    opacity: 0.5,
                                },
                            },
                        ],
                    };
                    echart.setOption(option);
                },

                // 股票信息初始化init
                async messageInit() {
                    console.log("start to init");
                    let data_json = await eel.step_init()();

                    this.allStockInfo = data_json["stock"];
                    this.stockEnum = data_json["stockEnum"];
                    this.strategyEnum = data_json["strategyEnum"];
                    this.parameterEnum = data_json["parameterEnum"];
                    this.logicSymbolEnum = data_json["logicSymbolEnum"];

                    this.allStrategy = data_json["allStrategy"];
                },



                // 初始化 parameterEnum stockEnum allStock strategyEnumallStrategy
                init_info() {
                    axios.get('json/init_info.json').then((res) => {
                        data = res.data
                        this.parameterEnum = data.parameterEnum
                        this.stockEnum = data.stockEnum
                        this.allStock = data.allStock
                        this.strategyEnum = data.strategyEnum
                        this.allStrategy = data.allStrategy
                    });

                    console.log("debug 跳转过来");
                    // 是否从debug跳转过来的
                    axios.get('global/stepSelected.json').then((res) => {
                        data = res.data
                        console.log('data :>> ', data);
                        this.targetStockCode = data.code;
                        this.targetStrategyName = data.strategyName
                        if (this.targetStockCode != "" && this.targetStrategyName != "") {
                            this.isSelectedStockAndStrategy = true;
                            this.selectedStockHandler();
                            this.selectedStrategyHandler();
                        }
                    });

                    eel.clear_step_selected_file();
                },

                // stock name,code,data,time,MA5,MA10,MA20,MA30
                init_stock(code) {
                    console.log("init_stock:" + code);
                    path = './stockDetail/' + code + "/";

                    // 更新 code name data
                    this.targetStockData = [];
                    axios.get(path + "chartData.txt").then((res) => {
                        let arr = []
                        let data_str = res.data
                        let arr1 = data_str.split("\r\n");
                        for (let i = 0; i < arr1.length; i++) {
                            arr1_item = arr1[i];
                            arr1_item.replace(/\r\n/g, "");
                            if (arr1_item != "") {
                                let arr2 = arr1_item.split(",");
                                arr.push(arr2)
                            }
                        }
                        this.targetStockData = arr;
                        // console.log(this.targetStockData);
                    });

                    // 更新 time
                    axios.get(path + "chartTimeData.txt").then((res) => {
                        arr = [];
                        let arr1 = res.data.split("\r\n");
                        for (let i = 0; i < arr1.length; i++) {
                            arr.push(arr1[i]);
                        }
                        this.targetStockTime = arr;
                        // console.log(this.targetStockTime);
                    });

                    // 更新 code name beg end
                    axios.get(path + "info.json").then((res) => {
                        let json = res.data
                        console.log(json);
                        this.targetStockCode = json.code
                        this.targetStockName = json.name
                        this.targetStockBeg = json.beg
                        this.targetStockEnd = json.end
                        this.setOption();
                    });

                    // 更新 MA数据
                    axios.get(path + "MAData.txt").then((res) => {
                        this.targetStockMA5 = [];
                        this.targetStockMA10 = [];
                        this.targetStockMA20 = [];
                        this.targetStockMA30 = [];
                        let arr = res.data.split("\r\n");
                        for (let i = 0; i < arr.length; i++) {
                            item = arr[i];
                            if (item != "") {
                                itemArr = item.split(',');
                                itemMA5 = itemArr[0];
                                itemMA10 = itemArr[1];
                                itemMA20 = itemArr[2];
                                itemMA30 = itemArr[3];
                                this.targetStockMA5.push(itemMA5)
                                this.targetStockMA10.push(itemMA10)
                                this.targetStockMA20.push(itemMA20)
                                this.targetStockMA30.push(itemMA30)
                            }
                        }
                    });
                    this.setOption();


                }, // end - init_stock



                // 选择股票后将code更新
                selectedStockHandler() {
                    // 根据获得的code，更新股票相关数据
                    console.log("选择股票");
                    this.init_stock(this.targetStockCode);
                    this.setOption();
                    if (this.targetStrategyName != "") {
                        this.isSelectedStockAndStrategy = true;
                        // eel.judge(this.targetStockCode.toString(), this.targetStrategyName)
                    }
                    this.isClickOK = false;
                },


                // 选择策略后更新strategy内容
                selectedStrategyHandler() {
                    console.log("选择策略");
                    this.targetStrategy = this.allStrategy[this.targetStrategyName];
                    console.log(this.targetStrategy);
                    // 如果股票也选择了，就更新数据
                    if (this.targetStockName != "") {
                        this.isSelectedStockAndStrategy = true;
                        // eel.judge(this.targetStockCode.toString(), this.targetStrategyName)
                    }
                    this.isClickOK = false;
                },



                // 点击确定按钮
                async buttonDetermineStockAndStrategyHandler() {
                    console.log("点击确定按钮");
                    this.now = 0;
                    this.targetChartToNowData = [];
                    this.targetChartToNowMA5Data = [];
                    this.targetChartToNowMA10Data = [];
                    this.targetChartToNowMA20Data = [];
                    this.targetChartToNowMA30Data = [];
                    this.isGetedJudgeData = await eel.judge(this.targetStockCode.toString(), this.targetStrategyName)();
                    console.log(this.isGetedJudgeData);
                    axios.get('stockDetail/' + this.targetStockCode + "/judge_result.json").then((res) => {
                        data = res.data;
                        this.increase = data.increase;
                        this.assetOwn = data.asset_own;
                        this.assetShare = data.asset_share;
                        this.stockNum = data.stock_num;
                        this.assetAll = data.asset_all;
                        this.markPoint = data.mark_point;
                        this.buyInfo = data.buy_info;
                        // console.log(this.buyInfo);
                        console.log(this.buyInfo);
                        this.setOption();
                        this.isClickOK = true;
                    });
                },



                filterDataUtil(data) {
                    returnData = data.filter((x, index) => {
                        return index <= this.now
                    })
                    return returnData;
                },



                // 动态获取chart数据
                refleshChartData() {
                    console.log("to now data");

                    this.targetChartToNowData = this.filterDataUtil(this.targetStockData);
                    this.targetChartToNowTime = this.filterDataUtil(this.targetStockTime);
                    this.targetChartToNowMA5Data = this.filterDataUtil(this.targetStockMA5)
                    this.targetChartToNowMA10Data = this.filterDataUtil(this.targetStockMA10)
                    this.targetChartToNowMA20Data = this.filterDataUtil(this.targetStockMA20)
                    this.targetChartToNowMA30Data = this.filterDataUtil(this.targetStockMA30)
                    this.setOption();

                    // console.log(this.targetChartToNowData);
                },



                // 点击运行全部后事件
                buttonEchartAllHandler() {
                    console.log("click all");
                    this.now = this.targetStockTime.length - 1;
                    console.log(this.now);
                    this.refleshChartData();
                    this.setOption();
                },



                // 点击下一步事件
                buttonEchartNextHandler() {
                    console.log("next");
                    console.log(this.now);
                    this.refleshChartData();
                    this.setOption();
                    this.now = this.now + 1;
                },

                // 点击下一步事件
                buttonEchartBeforetHandler() {
                    console.log("before");
                    this.now = this.now - 2;
                    console.log(this.now);
                    this.refleshChartData();
                    this.setOption();
                    this.now = this.now + 1;

                },



                // isBuy: true:买 false：卖
                // item ： {name,value,comment} 
                buttonChangeLogicContent(isBuy, item) {
                    console.log("change logic content");
                    console.log(item);
                    eel.change_logic_content(isBuy, this.targetStrategyName, item);
                    // logicType = "";
                    // if(isBuy){
                    //     logicType = "buyLogic";
                    // }else{
                    //     logicType = "sellLogic";
                    // }
                    // axios.get('/json/init_info.json').then((res)=>{
                    //     data = res.data;
                    //     logicData = data["allStrategy"][this.targetStrategyName][logicType];
                    //     console.log(logicData);
                    //     for(let i = 0;i<logicData.length;i++){
                    //         if(logicData[i].name = item.name){
                    //             logicData[i].value = item.value;
                    //             break;
                    //         }
                    //     }

                    // });
                },






            },
            /*end - method */



            mounted() {
                echart = echarts.init(this.$refs.shareChart);
                this.init_info();

                this.setOption();


                echart.on('click', this.funcClickChartItem);



            },

        }

        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.mount("#app");
    </script>

</body>

</html>